<template>
	<view>
		<headerTar title="账户余额" :isBack="false" />
		<view class="moneybox">
			<view class="account_money">
				<view class="account_money_num">{{moneyList.walletBalance}}</view>
				<view class="account_money_txt">账户余额(元) ></view>
				<view class="tip" @click="goRecharge">去充值 ></view>
			</view>
			<view class="charge_money">
				<view class="charge_money_num">{{moneyList.presentBalance}}</view>
				<view class="charge_money_txt">充电金(元) ></view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getUserInfoApi
	} from '@/api/my.js'
	import headerTar from '@/components/headerTar/header'
	export default {
		components: {
			headerTar
		},
		data() {
			return {
				moneyList: '' //用户信息
			}
		},
		onLoad() {
			this.getUserInfo()
		},
		methods: {
			goRecharge() {
				uni.navigateTo({
					url: '/pages/recharge/recharge'
				});
			},
			// 获取用户信息
			getUserInfo() {
				getUserInfoApi().then(res => {
					this.moneyList = res.data
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.moneybox {
		position: relative;
		width: 100%;
		padding: 0 15px;
		box-sizing: border-box;

		.account_money {
			height: 100px;
			text-align: center;
			border-radius: 8px;
			color: #fff;
			background-image: linear-gradient(90deg, #33c165, #33c666);

			.account_money_num {
				padding-top: 26px;
				font-size: 24px;
				font-weight: bold;
			}

			.account_money_txt {
				padding-top: 4px;
				font-size: 12px;
			}

			.tip {
				position: absolute;
				top: 25px;
				right: 30px;
				padding: 3px 5px;
				line-height: 16px;
				color: #33c165;
				background: #fff;
				border-radius: 10px;
				font-size: 12px;
			}
		}

		.charge_money {
			margin-top: 15px;
			height: 100px;
			text-align: center;
			border-radius: 8px;
			color: #fff;
			background-image: linear-gradient(90deg, #fe8b26, #ff933a);

			.charge_money_num {
				padding-top: 26px;
				font-size: 24px;
				font-weight: bold;
			}

			.charge_money_txt {
				padding-top: 4px;
				font-size: 12px;
			}

		}
	}
</style>